<!-- 蓝色登录页面2 -->
<template>
  <view class="font">
    <view class="img-a" :style="{backgroundImage:`url(${head})`}">
      <view class="t-b">
        欢迎来到
        <br />
        Autumn
      </view>
    </view>
    <view class="login-view" style="">
      <view class="t-login">
        <view class="login_text">
          <up-image :show-loading="true" :src="logoSrc" width="80px" height="80px"></up-image>
        </view>
        <view class="login_btn">
          <up-button type="primary" shape="circle" @click="login" text="微信一键登录"></up-button>
          <view class="text">
            <up-radio-group v-model="agreement">
              <up-radio name="同意" :customStyle="{marginBottom: '8px'}"></up-radio>
            </up-radio-group>
            <p style="font-size: 10px;"><span>我已阅读并同意</span>
              <span style="color: #3c9cff;">《隐私权政策 》</span>
              <span>,未注册手机号在登录后将自动为您创建账号</span>
            </p>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup name="wxLogin" lang="ts">
import head from '@/static/head.png';
import logoSrc from '@/static/logo.png';
import { to } from 'await-to-js';
import { useUserStore } from '@/store/modules/user';
const agreement = ref('');

const login = async () => {
  if (agreement.value !== '同意') {
    modal.confirm('请阅读全部条款，接受后可开始使用我们的服务', '', '同意', '不同意')
      .then(() => {
        agreement.value = '同意';
        wxLogin();
      })
      .catch(() => {
      });
  } else {
    wxLogin();
  }
};

const wxLogin = async () => {
  modal.loading('请求中...');
  const [err] = await to(useUserStore().wxLogin());

  if (!err) {
    tab.switchTab('/pages/home/home');
    modal.closeLoading();
  } else {
    modal.closeLoading();
    modal.msgError(err);
  }
};
</script>
<style lang="scss" scoped>
.txt {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login_text {
  font-size: 40rpx;
  font-weight: 500;
  color: #333333;
  position: relative;
  padding-bottom: 20rpx;
  margin-bottom: 90rpx;

  // &::before {
  // 	content: '';
  // 	position: absolute;
  // 	bottom: 0;
  // 	width: 46rpx;
  // 	height: 12rpx;
  // 	border-radius: 12rpx;
  // 	background-color: '#027dc9';
  // 	background: -webkit-linear-gradient(left, #027dc9, #3e84f7);
  // }
}

.inp {
  width: calc(100% - 200rpx);
}

.codeImage {
  width: 200rpx;
  height: 80rpx;
  background-color: #ddd;

  image {
    width: 100%;
    height: 100%;
  }
}

.img-a {
  width: 100%;
  height: 699rpx;
  // background-image: url('~@/static/head.png');
  background-size: 100%;
}

.text {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.reg {
  font-size: 28rpx;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  font-weight: bold;
  background: #f5f6fa;
  color: #000000;
  text-align: center;
  margin-top: 30rpx;
}

.login-view {
  width: 91.3%;
  margin: 0 auto;
  position: relative;
  margin-top: -390rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
}

.t-login {
  width: 100%;
  box-sizing: border-box;
  font-size: 28rpx;
  padding: 80rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.t-login button {
  font-size: 28rpx;
  background: #2796f2;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  font-weight: bold;
}

.login_btn {
  // width: 200px;
}

.t-login input {
  height: 90rpx;
  line-height: 90rpx;
  margin-bottom: 20rpx;
  border-bottom: 1px solid #E4E4E4;
  font-size: 28rpx;
}

.t-login .t-a {
  position: relative;
  font-size: 32rpx;
}

.t-b {
  text-align: left;
  font-size: 42rpx;
  color: #ffffff;
  padding: 130rpx 0 0 70rpx;
  font-weight: bold;
  line-height: 70rpx;
}

.t-login .t-c {
  position: absolute;
  right: 22rpx;
  top: 22rpx;
  background: #5677fc;
  color: #fff;
  font-size: 24rpx;
  border-radius: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 25rpx;
}

.t-login .t-d {
  text-align: center;
  color: #999;
  margin: 80rpx 0;
}

.t-login .t-e {
  text-align: center;
  width: 250rpx;
  margin: 80rpx auto 0;
}

.t-login .t-g {
  float: left;
  width: 50%;
}

.t-login .t-e image {
  width: 50rpx;
  height: 50rpx;
}

.t-login .t-f {
  text-align: center;
  margin: 150rpx 0 0 0;
  color: #666;
}

.t-login .t-f text {
  margin-left: 20rpx;
  color: #aaaaaa;
  font-size: 27rpx;
}

.t-login .uni-input-placeholder {
  color: #C0C4CC;
}

.cl {
  zoom: 1;
}

.cl:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: '\20';
}
</style>
